/*
 Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
*/

@use '../../styles' as styles;
@use '../../styles/tokens' as awsui;
@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;

.handle {
  appearance: none;
  color: awsui.$color-text-interactive-default;
  background: transparent;
  inline-size: fit-content;

  // Prevent the browser from scrolling on touch devices when the touch event comes from the drag handle,
  // because this would otherwise interfere with actually dragging the handle.
  // The `touch-action` CSS property is not supported in desktop Safari but it is in mobile Safari
  // (and all our supported mobile browsers, in all the supported versions), which is where it actually matters.
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
  touch-action: none;

  &-size-normal {
    block-size: awsui.$line-height-body-m;
    padding-inline: awsui.$space-scaled-xxxs;
  }

  &-size-small {
    block-size: awsui.$line-height-body-s;
  }

  &-drag-indicator:not(&-disabled) {
    cursor: grab;

    &.active {
      cursor: grabbing;
    }
  }

  &-resize-area {
    cursor: nwse-resize;

    @include styles.with-direction('rtl') {
      cursor: nesw-resize;
    }
  }

  &-resize-horizontal {
    cursor: ew-resize;
  }

  &-resize-vertical {
    cursor: ns-resize;
  }

  &:hover {
    color: awsui.$color-text-interactive-hover;
  }

  &:focus {
    outline: none;
    text-decoration: none;
  }

  @include focus-visible.when-visible {
    &:not(.hide-focus) {
      @include styles.focus-highlight(0px);
    }
  }
}

.resize-icon {
  stroke: awsui.$color-text-interactive-default;

  &:hover {
    stroke: awsui.$color-text-interactive-hover;
  }

  &-vertical {
    margin-block: auto;
    margin-inline: auto;
  }

  &-horizontal {
    transform: rotate(90deg);
  }
}

.prevent-pointer {
  pointer-events: none;
}
